<template>
  <div class="app-container">
    <el-button
      type="success"
      icon="el-icon-plus"
      @click="entity = {};dialogFormVisible = true"
      >添加模板</el-button
    >

    <!-- 渲染表格 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="模板id"> </el-table-column>
      <el-table-column prop="name" label="模板名称"> </el-table-column>
      <el-table-column prop="brands" label="品牌名称">
        <template slot-scope="scope">
          <div>
            <span v-for="e in scope">
              <span v-for="i in e.brands"> {{ i.name }}, </span> </span
            >...
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="specs" label="规格名称">
        <template slot-scope="s">
          <span v-for="e in s">
            <span v-for="i in e.specs"> {{ i.specName }}, </span> </span
          >...
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="
              dialogFormVisible2 = true;
              tempupdateshow(scope.row);
            "
            icon="el-icon-delete"
          >
            修改
          </el-button>
          <el-button
            type="primary"
            @click="delO(scope.row.id)"
            icon="el-icon-delete"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
    :current-page="searchMap.page"
      :page-size="searchMap.size"
      @current-change="findbypage"
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>
<!-- 
    <el-pagination
      small
      :current-page="page"
      :page-size="pages"
      @current-change="findbypage"
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination> -->

    <!-- 添加模板 -->
    <el-dialog
      title="添加编辑"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form>
        <el-form-item label="模板名称" label-width="100px">
          <el-input v-model="entity.name"></el-input>
        </el-form-item>
        <el-form-item label="关联品牌" label-width="100px">
          <el-select v-model="entity.brands" multiple placeholder="请选择品牌">
            <el-option
              v-for="item in brand"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联规格" label-width="100px">
          <el-select v-model="entity.specs" multiple placeholder="请选择规格">
            <el-option
              v-for="item in spec"
              :key="item.id"
              :label="item.specName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false;entity={}">取 消</el-button>
        <el-button type="primary" @click="saveTmp()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改模板 -->
    <el-dialog
      title="模板编辑"
      :visible.sync="dialogFormVisible2"
      :close-on-click-modal="false"
    >
      <el-form>
        <el-form-item label="模板名称" label-width="100px">
          <el-input v-model="entity.name"></el-input>
        </el-form-item>
        <el-form-item label="关联品牌" label-width="100px">
          <el-select v-model="entity.brands" multiple placeholder="请选择品牌">
            <el-option
              v-for="item in brand"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联规格" label-width="100px">
          <el-select v-model="entity.specs" multiple placeholder="请选择规格">
            <el-option
              v-for="item in spec"
              :key="item.id"
              :label="item.specName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false;entity={}">取 消</el-button>
        <el-button type="primary" @click="saveTmp()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { findbypageT, addT, updateT, deleteT, findAll } from "@/api/Template";
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisible2: false,
      entity: {},
      brand: [], //品牌列表
      spec: [], //规格列表
      searchMap: {
        page: 1,
        size: 5,
        where: {
          name: "",
        },
      },
      list: [],
      total:0,
    };
  },
  methods: {
    delO(e){
      this.searchMap.page=1;
      deleteT(e).then(e=>{
        this.search();
      })
    },
    search() {
      this.list=[];
      let tp = this;
      findbypageT(this.searchMap).then((e) => {
        e.list.forEach((t) => {
          var tem = {
            id: t.id,
            brands: JSON.parse(t.brands),
            specs: JSON.parse(t.spec),
            name: t.name,
          };
          tp.list.push(tem);
        });
        this.total=parseInt(e.total)
        
      });
    },
    findbypage(e) {
      this.searchMap.page = e;
      this.search();
    },
    tempupdateshow(item) {
      let b = [];
      let s = [];
      this.entity = JSON.parse(JSON.stringify(item));
      item.brands.forEach((e) => {
        b.push(e.id);
      });
      item.specs.forEach((e) => {
        s.push(e.id);
      });
      this.entity.brands = b;
      this.entity.specs = s;
    },
    saveTmp() {
      let temp = this;
      if (this.entity.id != null) {
        let tentity = JSON.parse(JSON.stringify(this.entity));
        tentity.specs.length = 0;
        tentity.brands.length = 0;
        this.entity.specs.forEach((e) => {
          temp.spec.forEach((ep) => {
            if (ep.id == e) {
              tentity.specs.push(ep);
            }
          });
        });
        this.entity.brands.forEach((e) => {
          temp.brand.forEach((ep) => {
            if (ep.id == e) {
              tentity.brands.push({
                id: ep.id,
                name: ep.name,
              });
            }
          });
        });
        let kentity = {
          id: tentity.id,
          name: tentity.name,
          spec: JSON.stringify(tentity.specs),
          brands: JSON.stringify(tentity.brands),
        };
        updateT(kentity).then((e) => {
          temp.search();
        });
      } else {
        let tentity = JSON.parse(JSON.stringify(this.entity));
        tentity.specs.length = 0;
        tentity.brands.length = 0;
        this.entity.specs.forEach((e) => {
          temp.spec.forEach((ep) => {
            if (ep.id == e) {
              tentity.specs.push(ep);
            }
          });
        });
        this.entity.brands.forEach((e) => {
          temp.brand.forEach((ep) => {
            if (ep.id == e) {
              tentity.brands.push({
                id: ep.id,
                name: ep.name,
              });
            }
          });
        });
        let kentity = {
          id: tentity.id,
          name: tentity.name,
          spec: JSON.stringify(tentity.specs),
          brands: JSON.stringify(tentity.brands),
        };
        addT(kentity).then((e) => {
          temp.search();
        });
      }
      this.entity = {};
      this.dialogFormVisible=false;
      this.dialogFormVisible2=false;
    },
  },

  created() {
    this.search();
    let p = this;
    findAll().then((e) => {
      p.brand = e.brands;
      p.spec = e.spec;
    });
    console.log(this.searchMap);
  },
};
</script>